<template>
  <div class="edit app-container">
    <el-dialog title="评论" :visible.sync="show" fullscreen append-to-body>
      <div class="content">
        <el-form ref="form" label-width="120px" label-position="right">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品名称:">
                {{options.goodsName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品分类:">
                {{options.goodsTypeName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格单位:">
                {{options.standards}}
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="image" style="margin-left: 15px;">
                <div class="image-item" v-for="item in images" :key="item">
                  <el-image style="width: 80px; height: 80px;border-radius: 4px;" :src="item | $showImage" fit="cover"></el-image>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="list">
                <div class="list-item" v-for="(item,index) in dataTable" :key="index" v-loading="loading">
                  <div class="col-1">
                    <!-- 用户头像 -->
                    <el-image style="width: 50px; height: 50px;"
                      src="https://img13.360buyimg.com/seckillcms/s250x250_jfs/t1/27510/30/17238/111828/62a449f1Eb0c679a6/1cee2abb190eea27.jpg"
                      fit="cover"></el-image>
                    <div style="margin-left: 10px;">破****空</div>
                  </div>
                  <div class="col-2">
                    <div class="col-2-title">
                      <el-rate v-model="item.commentStar" disabled text-color="#ff9900">
                      </el-rate>
                      <div>{{item.commentTime}}</div>
                    </div>
                    <div class="col-2-text">{{item.commentContent}}</div>
                    <div class="col-2-image">
                      <!-- 用户附件 -->
                      <div :class="{'col-2-image-item':true,'col-2-image-play':s==3}" v-for="s in item.pubCommentPics" :key="s.commentPicId">
                        <el-image style="width: 50px; height: 50px;border-radius: 2px;"
                          :src="s.commentPicAddress | $showImage"
                          fit="cover"></el-image>
                        <i class="el-icon-video-play" v-if="s == 3"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" />
      </div>
      <div slot="footer">
        <el-button  @click="cancel">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    evaluateList
  } from "@/api/shopping/content"
  export default {
    name: 'ContentEvaluate',
    data() {
      return {
        total: 0,
        show: false,
        dataTable: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        options: {},
        loading: false,
        images:[]
      }
    },
    methods: {
      cancel(){
        this.show = false
        this.options = {}
      },
      init(options) {
        this.options = options
        if(options.f1){
           this.images = options.f1.split(',')
            console.log(this.images)
        }

        this.loading = true
        this.show = true
        evaluateList({
          goodsId: options.goodsId
        }).then(res => {
          this.loading = false
          console.log('商品评论列表', res)
          this.total = res.total
          this.dataTable = res.rows.map(item => {
            item.commentStar = Number(item.commentStar)
            return item
          })
        })
      },
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    padding-right: 50px;

    .col-2-image {
      display: flex;

      .col-2-image-item {
        position: relative;
        cursor: pointer;

        .el-icon-video-play {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #FFFFFF;
          font-size: 30px;
        }

        &+.col-2-image-item {
          margin-left: 10px;
        }
      }

      .col-2-image-play::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: rgba(0, 0, 0, 0.2);
      }
    }

    .list {
      padding-left: 43px;
      padding-top: 10px;
      .list-item {
        display: flex;
        border: 2px solid #f2f2f2;
        border-radius: 4px;
        min-height: 100px;
        &+.list-item {
          margin-top: 10px;
        }

        .col-1 {
          width: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 2px solid #f2f2f2;
        }

        .col-2 {
          flex: 1;
          box-sizing: border-box;
          padding: 10px 25px;

          .col-2-text {
            margin: 8px 0;
            font-size: 14px;
          }

          .col-2-title {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }

    .image {
      display: flex;
      flex-wrap: wrap;

      .image-item {
        padding-left: 30px;
      }
    }
  }
</style>
